<template>
  <el-row style="height:100%;width:100vw;" type="flex" justify="center">
    <div style="color:#101010;height: 30px;">
      <span>远程服务：</span>
      <span>10.4.3.125:3000</span>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="localport" label="本地端口" />
      <el-table-column prop="teleport" label="远程端口"  />
      <el-table-column  label="开关" >
        <template #default="scope">
          <el-switch
          v-model="value1"
    class="ml-2"
    style="--el-switch-on-color: #13ce66;"
          @change="toggleDark"
        />
        </template>
      </el-table-column>
      <el-table-column label="操作">
      <template #default="scope">
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
         删除
        </el-button>
      </template>
    </el-table-column>
    </el-table>
    <div>
      <el-button>上一步</el-button>
      <el-button style="margin-left: 60px;">下一步</el-button>
    </div>
  </el-row>
</template>

<script setup lang="ts">

const tableData = [
  {
    localport: '80',
    teleport: '80',
    switch: '1',
  },
   {
    localport: '80',
    teleport: '80',
    switch: '1',
  },
]
const handleDelete = (x1:any,x2:any) => {
  console.log()
}
const toggleDark=()=>{}
import { ref } from 'vue'
const value1 = ref(true)

</script>
<style scoped></style>
